<script setup lang="ts">
import {computed, ref, watch} from "vue";
import {getDirectoryTree} from '@/api/disk/disk.ts'
const props = defineProps({
  show:{
    type:Boolean,
    default:false
  },
  currentPathId:{
    type:Number,
    default:1
  }
})
const emits = defineEmits(['update:modelValue','confirm']);
const open = computed(()=>props.show)
const currentPathId = computed(()=>props.currentPathId)
const targetPath = ref('/');

const treeData = ref([]);

const selectedKeys = ref<string[]>([]);




const handleOk = ()=>{
  emits('confirm',selectedKeys.value[0]);

}
const close = () => {
  emits('close')
}
const trsfromTree = (data:any[]) => {
  const arr = [];
  data.forEach(item=>{
    if(item.id==currentPathId.value){
      item.disabled = true
    }
    if(item.children&&item.children.length>0){
      item.children =   trsfromTree(item.children)
    }
    arr.push(item);
  })
  return arr;
}
const queryDirectoryTree = ()=>{
  getDirectoryTree().then(res=>{
    treeData.value =trsfromTree(res.result)
    console.log('trsfromTree',trsfromTree( treeData.value))
  })
}
const select = (selectedKeys, {node})=>{

  targetPath.value = node.name
}

watch(()=>props.currentPathId,value => {
  console.log('currentPathId',value)
  queryDirectoryTree()
},{immediate:true})
</script>


<template>
  <a-modal v-model:open="open" title="选择目标路径"
           @ok="handleOk"
           @cancel="close"
           @close="close">
    <div>
      <a-form>
        <a-form-item label="目标路径">
          <a-input readonly v-model:value="targetPath" placeholder="请选择目标路径"></a-input>
        </a-form-item>
      </a-form>
      <a-tree
          v-model:selectedKeys="selectedKeys"
          :tree-data="treeData"
          :defaultExpandAll="true"
          :fieldNames="{
            children:'children',
             title:'name',
              key:'id'
          }"
          @select="select"
      >

      </a-tree>
    </div>
  </a-modal>
</template>

<style scoped lang="scss">

</style>
